<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        body {
            background: #FAF9F9;
        }

        .wrap_top,
        .wrap_center {
            width: 100%;
            background: #fff;
            overflow: hidden;
        }

        .wrap_top_inner,
        .wrap_center_inner {
            width: 100%;
            overflow: hidden;
            padding: 0 15px;
        }

        .wrap_center {
            margin-top: 10px;
        }

        .wrap_top_inner,
        .wrap_center_inner {
            width: 100%;
            overflow: hidden;
        }

        .wrap_top_inner li,
        .wrap_center_inner li {
            width: 100%;
            padding: 17px 0;
            display: flex;
            overflow: hidden;
        }

        .wrap_top_inner li:first-child {
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
        }

        .wrap_center_inner li {
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
        }

        .wrap_center_inner li:last-child {
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #fff, #fff 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #fff, #fff 50%, transparent 50%);
        }

        .wrap_top_inner li span,
        .wrap_center_inner li span {
            display: inline-block;
        }

        .wrap_top_inner li span.title,
        .wrap_center_inner li span.title {
            font-size: 15px;
            color: #222222;
        }

        .wrap_top_inner li span.icon,
        .wrap_center_inner li span.icon {
            width: 8px;
            height: 12px;
            margin-top: 4.5px;
            margin-left: auto;
        }

        .wrap_top_inner li span.icon img,
        .wrap_center_inner li span.icon img {
            width: 100%;
            height: 100%;
        }

        .wrap_top_inner li span.check {
            margin-left: auto;
        }

        .aui-switch:checked {
            border-color: #FF9014;
            background-color: #FF9014;
        }

        .wrap_bottom {
            width: 100%;
            overflow: hidden;
            background: #fff;
            padding: 17px 15px;
            margin-top: 10px;
            text-align: center;
            font-size: 15px;
            color: #FF9014;
        }
    </style>
</head>

<body>
    <div class="wrap" id="app">
        <div class="wrap_top">
            <div class="wrap_top_inner">
                <ul>
                    <li tapmode @click="clearCache()">
                        <span class="title">清除缓存</span>
                        <span class="icon" style="display:flex;align-items:center;    justify-content: flex-end;align-items: center;font-size:14px;font-weight:400;color: #666;">{{cache}}<img class="aui-margin-l-15" src="../../image/arrow_right.png" alt=""></span>
                    </li>
                    <!-- <li>
                        <span class="title">消息推送</span>
                        <span class="check"><input type="checkbox" class="aui-switch" v-model="isPush"></span>
                    </li> -->
                </ul>
            </div>
        </div>
        <div class="wrap_center">
            <div class="wrap_center_inner">
                <ul>
                    <!-- <li style="display: flex;align-items: center;">
                        <span class="title">个人信息</span>
                        <span style="margin-left:15px;"></span>
                        <span class="icon"><img src="../../image/arrow_right.png" alt=""></span>
                    </li> -->
                    <li @click='openAboutUsPage()'>
                        <span class="title">关于我们</span>
                        <span class="icon"><img src="../../image/arrow_right.png" alt=""></span>
                    </li>
                    <!-- <li tapmode @click="bindWeixin();" style="display: flex;justify-content: space-between;">
                        <span class="title">微信号</span>
                        <span class="icon-1" style="display:flex;align-items:center;    justify-content: flex-end;align-items: center;font-size:14px;font-weight:400;color: #666;">{{wxOpenid}}<img style="width:8px;margin-left:15px;" src="../../image/arrow_right.png" alt=""></span>
                    </li> -->
                    <li @click='openAccountSecurityPage()'>
                        <span class="title">账户与安全</span>
                        <span class="icon"><img src="../../image/arrow_right.png" alt=""></span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="wrap_bottom" tapmode @click="logout();">
            退出登录
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
        FastClick.attach(document.body); //解决vue在ios下点击延迟的问题
        // vm.verifyPush(); //判断是否开启推送
        api.getCacheSize(function(ret) {
            var cache = ret.size;
            var num = 1024.00; //byte
            if (cache < num) {

                if (vm.cache == '0B') {
                    vm.cache = '';
                } else {
                    vm.cache = cache + "B";
                }
            } else if (cache < Math.pow(num, 2)) {
                vm.cache = (cache / num).toFixed(2) + "K"; //kb
            } else if (cache < Math.pow(num, 3)) {
                vm.cache = (cache / Math.pow(num, 2)).toFixed(2) + "M"; //M
            } else if (cache < Math.pow(num, 4)) {
                vm.cache = (cache / Math.pow(num, 3)).toFixed(2) + "G"; //G
                vm.cache = (cache / Math.pow(num, 4)).toFixed(2) + "T"; //T
            }
        });
    }
    var vm = new Vue({
        el: "#app",
        data: {
            cache: '', //缓存数
            is_login: false, //用户是否登录
            isPush: true,
        },
        methods: {

            /**
             * [清除缓存]
             * @return {[type]} [description]
             */
            clearCache: function() {
                if (!vm.cache) {
                    return;
                }
                api.clearCache(function() {
                    api.getCacheSize(function(ret) {
                        var cache = ret.size;
                        var num = 1024.00; //byte
                        if (cache < num) {
                            vm.cache = cache + "B";
                            if (vm.cache == '0B') {
                                vm.cache = '';
                            }
                        } else if (cache < Math.pow(num, 2)) {
                            vm.cache = (cache / num).toFixed(2) + "K"; //kb
                        } else if (cache < Math.pow(num, 3)) {
                            vm.cache = (cache / Math.pow(num, 2)).toFixed(2) + "M"; //M
                        } else if (cache < Math.pow(num, 4)) {
                            vm.cache = (cache / Math.pow(num, 3)).toFixed(2) + "G"; //G
                            vm.cache = (cache / Math.pow(num, 4)).toFixed(2) + "T"; //T
                        }
                    });

                    cl.toast({
                        msg: '清除完成'
                    })
                });
            },
            /**
             * [判断是否开启极光推送]
             * @return {[type]} [description]
             */
            verifyPush: function() {
                var ajpush = api.require('ajpush');
                ajpush.isPushStopped(function(ret) {
                    if (ret && ret.isStopped) { //false是推送开启状态，true是推送关闭状态
                        vm.isPush = false;
                    } else {
                        vm.isPush = true;
                    }
                });
            },
            /**
             * [退出登录]
             * @return {[type]} [description]
             */
            logout: function() {
                cl.openAlert({
                    content: '确定要退出登录吗？'
                }, function(res) {
                    if (res.eventType === "right") {
                        //移除监听
                        // var ajpush = api.require('ajpush');
                        // var param = {
                        //     alias: ''
                        // };
                        // ajpush.bindAliasAndTags(param, function(ret) {});

                        api.sendEvent({
                            name: 'backindex'
                        });
                        api.sendEvent({
                            name: 'fixedColor',
                        });
                        $api.setStorage('userToken', null);
                        api.sendEvent({
                            name: 'logout_success',
                        });
                        cl.closeToWin({
                            name: 'root'
                        });
                    }
                });
            },
            openAccountSecurityPage: function() {
                cl.openWin({
                    name: 'account_security'
                });
            },
            openAboutUsPage:function(){
              cl.openWin({
                  name: 'about_us'
              });
            },
            openFeedBackPage: function() {
                cl.openWin({
                    name: 'feed_back'
                });
            }
        },
        watch: {
            isPush: function(newval, oldval) {
                if (newval) {
                    var ajpush = api.require('ajpush');
                    ajpush.resumePush(function(ret) {
                        if (ret && ret.status) {
                            //success
                        }
                    });
                    cl.toast({
                        msg: '已开启消息通知，重启应用后生效'
                    })
                } else {
                    var ajpush = api.require('ajpush');
                    ajpush.stopPush(function(ret) {
                        if (ret && ret.status) {
                            //success
                        }
                    });
                }
            }
        }
    })
</script>

</html>
